<template>
  <view class="my-settle-container">
    <!-- 全选 -->
    <label class="radio" @click="changeAllState">
      <radio color="#C00000" :checked="isFullCheck" /><text>全选</text>
    </label>

    <!-- 合计 -->
    <view class="amount-box">
      合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
    </view>

    <!-- 结算按钮 -->
    <view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>
  </view>
</template>

<script>
  import { mapGetters, mapMutations,mapState } from 'vuex'
  export default {
    name:"my-settle",
    computed: {
         ...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount']),
         ...mapGetters('m_user',['addstr']),
         ...mapState('m_user',['token']),
         ...mapState('m_cart',['cart']),
         
         isFullCheck() {
               return this.total === this.checkedCount
             },
      },
    data() {
      return {
        //倒计时秒数
        seconds:3,
        timer:null
      };
    },
    methods: {
        // 使用 mapMutations 辅助函数，把 m_cart 模块提供的 updateAllGoodsState 方法映射到当前组件中使用
        ...mapMutations('m_cart', ['updateAllGoodsState']),
        ...mapMutations('m_user',['updateRedirectInfo']),
         changeAllState() {
            // 修改购物车中所有商品的选中状态
            // !this.isFullCheck 表示：当前全选按钮的状态取反之后，就是最新的勾选状态
            this.updateAllGoodsState(!this.isFullCheck)
          },
          settlement(){
            if(!this.checkedCount) return uni.$showMsg('请选择要结算的商品')
            
            if(!this.addstr) return uni.$showMsg('请选择收货地址')
            
            //if(!this.token) return uni.$showMsg('请先登录')
            if(!this.token) return this.delayNavigate()
            this.payOrder()
          },
         async payOrder(){
            const orederInfo={
              order_price:this.checkedGoodsAmount,
              consignee_addr:this.addstr,
              goods:this.cart.filter(x=>x.goods_state).map(x=>({
                goods_id:x.goods_id,
                goods_number:x.goods_count,
                goods_price:x.goods_price
              }))
            }
            //发起请求创建订单
          const{data:res}=await uni.$http.post('/api/public/v1/my/orders/create',orderInfo)
          if(res.meta.status!==200) return uni.$showMsg('创建订单失败')
          //得到服务器响应的订单编号
          const orderNumber=res.message.order_number
          
          const{data:res2}=await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder',{order_number:orderNumber})
           if(res2.meta.status!==200) return uni.$showMsg('创建预付订单失败')
           const payInfo=res2.message.pay
           
           
          const [err,succ] =await uni.requestPayment(payInfo)
          if(err) return uni.$showMsg('订单未支付')
          const {data:res3}= await uni.$http.post('/api/public/v1/my/orders/chkOrder',{order_number:orderNumber})
          if(res3.meta.status!==200) return uni.$showMsg('订单未支付')
          uni.showToast({
            title:'订单支付完成',
            icon:'success'
          })
           
          },
          //延时导航到my页面
          delayNavigate(){
            this.seconds=3
            this.showTips(this.seconds)
            this.timer=setInterval(()=>{
              this.seconds--
              if(this.seconds<=0){
                clearInterval(this.timer)
                uni.switchTab({
                  url:'/pages/my/my',
                  success:()=>{
                    this.updateRedirectInfo({
                      openType:'switchTab',
                      from:'/pages/cart/cart'
                    })
                  }
                })
                return
              }
              this.showTips(this.seconds)
            },1000)
          },
          //展示倒计时的提示消息
          showTips(n){
            uni.showToast({
              icon:'none',
              title:'请登录后再结算！'+n+'秒后跳转到登录页',
              mask:true,
              duration:1500
            })
          }
      },
    
  }
</script>

<style lang="scss">
.my-settle-container{
  position: fixed;
  bottom: 0;
  left:0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size:14px;
  padding-left: 5px;
  .radio{
    display: flex;
    align-items: center;
  }
  .amount-box{
    .amount{
      color: #C00000;
      font-weight: bold;
    }
  }
  .btn-settle{
    background-color: #C00000;
    height:50px;
    color: white;
    line-height: 50px;
    padding: 0 10px;
    min-width: 100px;
    text-align: center;
  }
  
}
</style>
